<template>
	<view class="wallet-page">
		<view class="content">
			<view class="title">充值金额</view>
			<view class="recharge-amount">
				<view class="amount-item" :class="{ 'active': rechargeAmount === 100 }" @click="selectAmount(100)">
					<text>100</text>
				</view>
				<view class="amount-item" :class="{ 'active': rechargeAmount === 200 }" @click="selectAmount(200)">
					<text>200</text>
				</view>
				<view class="amount-item" :class="{ 'active': rechargeAmount === 500 }" @click="selectAmount(500)">
					<text>500</text>
				</view>
				<view class="amount-item" :class="{ 'active': rechargeAmount === 1000 }" @click="selectAmount(1000)">
					<text>1000</text>
				</view>
				<view class="amount-item" :class="{ 'active': rechargeAmount === 2000 }" @click="selectAmount(2000)">
					<text>2000</text>
				</view>
				<view class="amount-item custom-amount" :class="{ 'active': isCustomAmount }"
					@click="showCustomAmountInput">
					<input v-if="isCustomAmount" type="number" v-model="customAmount" class="custom-input"
						placeholder="自定义金额" />
					<text v-else>自定义</text>
				</view>
			</view>
			<view class="title">充值方式</view>
			<view class="recharge-method">
				<view class="method-item" :class="{ 'active': rechargeMethod === 'wechat' }"
					@click="selectMethod('wechat')">
					<uni-icons type="weixin" color="#0cba09" size="24"></uni-icons>
					<text>微信</text>
				</view>
				<!-- <view class="method-item" :class="{ 'active': rechargeMethod === 'alipay' }"
                    @click="selectMethod('alipay')">
                    <image src="/static/alipay-icon.png" mode="widthFix"></image>
                    <text>支付宝二维码</text>
                </view> -->
			</view>
			<view class="confirm-btn" @click="confirmRecharge">
				<text>确认充值</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pay
	} from "@/api/userApi/user.js";
	export default {
		data() {
			return {
				rechargeAmount: 100,
				rechargeMethod: 'wechat',
				isCustomAmount: false,
				customAmount: ''
			};
		},
		methods: {
			selectAmount(amount) {
				this.rechargeAmount = amount;
				this.isCustomAmount = false;
			},
			selectMethod(method) {
				this.rechargeMethod = method;
			},
			showCustomAmountInput() {
				this.isCustomAmount = true;
				this.rechargeAmount = null;
			},
			confirmRecharge() {
				pay({
					amount: this.rechargeAmount || this.customAmount,
				}).then(res => {
					if (res.code == 200) {
						wx.requestPayment({
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success(res) {
								uni.showToast({
									icon: "success",
									title: "充值成功"
								})
								setTimeout(() => {
									uni.navigateBack(1)
								}, 1000)
							},
							fail(err) {
								uni.showToast({
									icon: "error",
									title: "充值失败"
								})
							}
						})
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.wallet-page {
		background-color: #f5f5f5;
		height: 100vh;

		.content {
			padding: 20rpx;

			.recharge-amount {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-bottom: 32rpx;

				.amount-item {
					width: 185rpx;
					height: 100rpx;
					background-color: #fff;
					border-radius: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 32rpx;
					margin-bottom: 32rpx;
					font-size: 32rpx;

					&.active {
						border: 4rpx solid #1890ff;
					}
				}

				.custom-input {
					width: 160rpx;
					height: 60rpx;
					border: none;
					font-size: 32rpx;
					text-align: center;
				}
			}

			.recharge-method {
				display: flex;
				margin-bottom: 32rpx;

				.method-item {
					width: 250rpx;
					height: 120rpx;
					background-color: #fff;
					border-radius: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 32rpx;
					font-size: 32rpx;

					image {
						width: 64rpx;
						height: 64rpx;
						margin-bottom: 16rpx;
					}

					&.active {
						border: 4rpx solid #1890ff;
					}
				}
			}

			.confirm-btn {
				width: 690rpx;
				height: 90rpx;
				background-color: #1890ff;
				border-radius: 45rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 90rpx;
			}
		}
	}
</style>